<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优永动助手 - 我的激活码</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/css/blog.css">
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
    <style>
        .jihuoma-box {
            font-size: 40px;
            background-color: #c8c8c8;
            margin: 2% 2% 2% 2%;
            border-radius: 30px;
            padding-left: 50px;
            color: white;

        }

        .jihuoma-box-nouse {
            font-size: 40px;
            background-color: #23bd14;
            margin: 2% 2% 2% 2%;
            border-radius: 30px;
            padding-left: 50px;
            color: white;

        }

        .jihuoma-box .layui-row {
            line-height: 90px;
        }

        .jihuoma-box-nouse .layui-row {
            line-height: 90px;
        }
        .blog-main{
            padding-bottom: 300px;
        }
        .buybtn-box{
            position: fixed;
            bottom: 188px;
            width: 100%;
        }
        #buybtn{
            width: 70%;
            height: 120px;
            background-color: #23d14b;
            margin-left: 10%;
            font-size: 46px;
            border-radius: 20px;
        }
        .jihuoma-key{
            word-break: break-all;
        }
    </style>
</head>
<body>

<div class="layui-row search-main log-title">

    <div class="layui-col-xs2" onclick="history.go(-1)">
        <i class="layui-icon layui-icon-left return-btn"></i>
    </div>

    <div class="layui-col-xs4 layui-col-xs-offset2">我的激活码</div>

</div>


<div class="layui-row blog-main">

    <div th:each="jihuoma:${jihuomaDOS}"
         th:class="${jihuoma.isuser}==0?'layui-row jihuoma-box-nouse':'layui-row jihuoma-box'">
        <div class="layui-row" th:text="${jihuoma.isuser}==0?'激活码（未使用）':'激活码（已使用）'">激活码(未使用)</div>
        <div class="layui-row">
            <div class="layui-col-xs7 jihuoma-key" th:text="${jihuoma.key}"></div>
            <div class="layui-col-xs4 " th:text="'时长：'+${jihuoma.timelength}+'h'"></div>

        </div>
        <div class="layui-row">
            <div class="layui-col-xs6" th:text="${#dates.format(jihuoma.createtime,'yyyy-MM-dd hh:mm:ss')}">
            </div>
            <div class="layui-col-xs4 layui-col-xs-offset2">
                <input style="background-color:unset;color: white;" type="button" th:data-clipboard-text="${jihuoma.key}"
                       data-clipboard-action="copy"  class="copybtn"
                       value="一键复制">
            </div>
        </div>
    </div>

    <div class="layui-row buybtn-box">
        <button type="button" class="layui-btn" id="buybtn" onclick="openlayer()">购买激活码</button>
    </div>

</div>


</div>
<script>

    $(document).ready(function(){
        var clipboard = new Clipboard('.copybtn');
        clipboard.on('success', function(e) {
            layui.use('layer', function(){
                var $ = layui.jquery, layer = layui.layer;
                layer.msg("复制成功");
            });
        });
        clipboard.on('error', function(e) {
            alert("测试1复制失败！请手动复制")
        });
    })

    function openlayer() {
       //购买激活码
        window.location = "/buyjihuoma";

    }
</script>
</body>
</html>